<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="test">尚硅谷IT教育</div>

<div id="demo">
  <ul>
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
    <li>test3</li>
    <li>test3</li>
    <li>test3</li>
    <li>test3</li>
    <li>test3</li>
  </ul>
</div>

<!--
DocumentFragment: 文档碎片(高效批量更新多个节点)
DOM树的操作会引起回流(重排)，那我们可以将DocumentFragment作为一个暂时的DOM节点存储器，
当我们在DocumentFragment 修改完成时，我们就可以将存储DOM节点的DocumentFragment一次性加入DOM树，
从而减少回流次数，达到性能优化的目的。
-->

<script type="text/javascript">

  const div = document.getElementById('demo')
  // 创建空的fragment容器
  const fragment = document.createDocumentFragment() 
  // Node ==> Document/ Element / Attr / Text / DocumentFragment
  // 将div中所有子节点转移为fragment的子节点
  console.log(div.childNodes)
  let child
  while(child=div.firstChild) {
    fragment.appendChild(child) // 一个节点只能有一个父节点
  }

  // 处理fragment中所有li
  console.log(fragment.children)
  const lis5 = fragment.children[0].children
  Array.prototype.slice.call(lis5).forEach(li => {
    li.innerHTML = 'atguigu----------------------------------------------------------------' // 此时界面不会重排
  })

  // 将fragment添加为div的子节点
  div.appendChild(fragment) // fragment本身不会进入div, fragment的所有子节点进入div  ==> 此时批量更新

</script>
</body>
</html>